<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8">
  <title>perspective</title> 
  <style>
  .cube{ 
    font-size: 4em;
    width: 2em; 
    margin: 1.5em auto; 
    transform-style:preserve-3d; 
    transform:rotateX(-30deg) rotateY(30deg);
    }
    .side{ 
      position: absolute; 
      width: 2em; 
      height: 2em; 
      line-height: 2em; 
      background: rgba(255,99,71,0.6); 
      border: 1px solid rgba(0,0,0,0.5); 
      color: white; 
      text-align: center; 
      
    }
    .front{ 
      transform:translateZ(1em); 
    }
    .bottom{ 
      transform:rotateX(-90deg) translateZ(1em); 
    }
    .top{ 
      transform:rotateX(90deg) translateZ(1em); 
    }
    .left{ 
      transform:rotateY(-90deg) translateZ(1em); 
    }
    .right{ 
      transform:rotateY(90deg) translateZ(1em); 
    }
    .back{ 
      transform:translateZ(-1em); 
    }
    </style> 
  </head> 
  <body>
    <div class="cube"> 
      <div class="side front">1</div>
      <div class="side back">6</div> 
      <div class="side right">4</div> 
      <div class="side left">3</div>
      <div class="side top">5</div>
      <div class="side bottom">2</div>
      </div> 
  </body> 
</html>